<template>
	<view class="home">
		<view class="title">
			<view class="">
				信用赊货
			</view>
			<view class="">
				首选赊货签!
			</view>
		</view>
		<view class="top">
			<view class="avatarBox">
				<view class="" style="display: flex;align-items: center;">
					<image class="avatar-wrapper" :src="userInfo.UserAvatarURL?userInfo.UserAvatarURL:userUrl"
						mode="aspectFit"></image>
					我的赊货
				</view>
				<image style="height: 2px;position: absolute;top: 35px;width: 70%;" src="../../static/home/line.png"
					mode="">
				</image>
				<view class="fontG">
					赊货额度(元)
				</view>
			</view>
			<view class="moneyYuan" v-if="auth == 0">
				<text class="money">{{momenyFormat(Usedamount)}}</text>
				<text class="yuan">元</text>
			</view>
			<!-- 未认证 -->
			<view class="moneyYuan noAuth" v-if="auth == 1">
				尚未认证
			</view>
			<!-- 认证中 -->
			<!-- <view class="moneyYuan noAuth" v-if="auth == 2">
				认证中···
			</view> -->
			<view class="statusNum" v-if="auth == 0">
				<view class="statusItem" v-for="item in statusList" :key="item.title">
					<view class="num">
						{{momenyFormat(item.number)}}
					</view>
					<view class="text">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- <view class="statusNum" v-else>
				<view class="statusItem remarkItem">
					<image src="/static/home/remarkIcon.png" mode=""></image> 极速审核
				</view>
				<view class="statusItem remarkItem">
					<image src="/static/home/remarkIcon.png" mode=""></image> 通过率高
				</view>
				<view class="statusItem remarkItem">
					<image src="/static/home/remarkIcon.png" mode=""></image> 闪电放款
				</view>
			</view> -->
		</view>
		<!-- <view class="iconImageBox">
			<view class="IIB">
				<image src="../../static/home/IIB1.png" mode=""></image>
				<view class="IIBtitle">
					信息安全
				</view>
				<view class="IIBremark">
					完全保障
				</view>
			</view>
			<view class="IIB">
				<image src="../../static/home/IIB2.png" mode=""></image>
				<view class="IIBtitle">
					持牌机构
				</view>
				<view class="IIBremark">
					放心合规
				</view>
			</view>
			<view class="IIB">
				<image src="../../static/home/IIB3.png" mode=""></image>
				<view class="IIBtitle">
					息费透明
				</view>
				<view class="IIBremark">
					银行100+
				</view>
			</view>
		</view> -->

		<view class="content" v-if="auth==0">
			<scroll-view class="scroll" style="width: 100%;" scroll-y="true" :show-scrollbar="false"
				@scrolltolower="lower">
				<view class="merchant" v-for="item,index in homeListData" :key="index" @click="toInfoPage(item)">
					<view class="imageBox">
						<image class="imageLeft" :src="item.Logo||'/static/logo.png'" mode=""></image>
						<text class="textOverflow textWidth">{{item.CompanyName}}</text>
						<image class="imageRight" v-if="item.IsConfirm==0" src="/static/home/queren.png" mode="">
						</image>
						<image class="imageRight" v-if="item.IsConfirm==1" src="/static/home/finish.png" mode="">
						</image>
						<image class="imageRight" v-if="item.IsConfirm==2" src="/static/home/judan.png" mode=""></image>
					</view>
					<view class="">
						单号：{{getReplaceId("B"+item.Id)}}
					</view>
					<view class="flexBox">
						<view class="">
							日期：{{item.CreateTime?item.CreateTime.substring(0,10):''}}
						</view>
						<view class="">
							金额：￥{{momenyFormat(item.CreditAmount)}}
						</view>
					</view>
					<!-- <view class="">
						账期：{{item.AccountingStartTime?item.AccountingStartTime.substring(0,10):''}} ~
						{{item.AccountingEndTime?item.AccountingEndTime.substring(0,10):''}}
					</view> -->
					<view class="">
						账期：{{item.Period}}天({{item.AccountingStartTime?item.AccountingStartTime.substring(0,10):''}} ~
						{{item.AccountingEndTime?item.AccountingEndTime.substring(0,10):''}})
					</view>
				</view>
				<view class="" style="padding-bottom: 100rpx;">
					<uniLoadMore :status="status" :contentText="contentText" :rows="homeListData"></uniLoadMore>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="content" v-else>
			<view class="scroll">
				<image style="width: 100%;" src="../../static/home/banner.png" mode="aspectFit"></image>
			</view>
		</view> -->
		<!-- 		<button v-if="auth==0" style="margin-top: 10px;" type="primary"
			@click.stop="toPage('/pages/signFor/signFor?q=https://shq.yoojet.com?id=1724723625505853440&SignType=3&IsPosition=0&Distance=&Type=0')">签收</button> -->
		<button v-if="auth==0" style="margin-top: 10px;" type="primary"
			@click="toPage('/pages/index/index')">立即赊货</button>
		<button v-else :disabled="auth==2" style="margin-top: 10px;" type="primary" @click="goPage">去认证</button>
		<!-- <view class="btnBox">
		<!-- <view class="btnBox">
			<button type="primary" @click="toPage('/pages/limit/limit')">我的额度</button>
		</view>-->

	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {
		momenyFormat
	} from '../../utils/utils.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				auth: 0,
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				statusList: [{
						value: '0',
						title: '全部',
						number: ""
					}, {
						value: '1',
						title: '已发货',
						number: ""
					},
					{
						value: '2',
						title: '已签收',
						number: ""
					},
					{
						value: '3',
						title: '已还款',
						number: ""
					}
				],
				userUrl: 'https://hzq.yoojet.com/logo200.png',
				userInfo: {},
				pagination: {
					PageIndex: 1,
					PageRows: 10,
				},
				// 赋值总条数
				Total: 0,
				momenyFormat,
				homeListData: [],
				// 顶部统计
				entity: {},
				// 顶部额度数据
				Totalamount: 0,
				Usedamount: 0,
				CompanyInfo: {},
				flag: false,
				// 是否进行商铺认证弹窗一次
				isShop: false
			}
		},
		onLoad() {},
		onShow() {

			uni.removeStorageSync('ReceiptKeyword')
			this.homeListData = []
			this.pagination.PageIndex = 1
			this.userInfo = uni.getStorageSync('userInfo')
			// console.log('首次加载this.userInfor', this.userInfo)
			this.getDataList()
			this.userInfo = uni.getStorageSync('userInfo')
			// 获取顶部统计数据
			this.GetBuyerStatistics()
			// 获取顶部额度数据
			this.GetLimit()
			// 获取公司信息
			// this.GetDataCompanyData()
			this.AuthRealName()
			// 判断是否认证
			// 验证是否实名认证

		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数
			// 加载
			this.status = "loading"
			this.homeListData = []
			this.pagination.PageIndex = 1
			// 重新获取查询数据
			this.getDataList()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
				// 暂停加载  没有更多了
				this.status = "noMore"
				return
			}
			this.getDataList()
		},
		methods: {
			goPage() {
				uni.navigateTo({
					url: '/pages/User/RealPage'
				})
			},
			// 验证是否实名认证  追加用户信息字段到缓存  后再签收货单页面使用
			// 验证是否实名认证
			AuthRealName() {
				// let UserInfo = this.userInfo
				// //使用jsonp解决百度地图的跨域问题
				// this.$jsonp('https://veri.yoojet.com/auth/VeriRecord/state?Value=' + UserInfo.UserPhone, ).then(res => {
				// 	console.log('获取跨域后的结果', res)
				// })

				let UserInfo = this.userInfo
				console.log('登录成功后获取的用户信息', UserInfo)
				this.flag = false
				uni.request({
					url: 'https://veri.yoojet.com/auth/VeriRecord/state?Value=' + UserInfo.UserPhone,
					method: 'GET'
				}).then(result => {
					let [err, res] = result;
					if (res.data.code == 200) {
						this.auth = 0
						// 说明已认证
						console.log('获取的实名信息=========================', res.data.data, this.flag, UserInfo)
						this.flag = true
						this.img = res.data.data.veriType

						// 相关字段插入用户信息  从新缓存 
						this.$set(UserInfo, 'fromDevice', res.data.data.fromDevice)
						this.$set(UserInfo, 'id', res.data.data.id)
						this.$set(UserInfo, 'createTime', res.data.data.createTime)
						this.$set(UserInfo, 'IdCard', res.data.data.idNumber)
						this.$set(UserInfo, 'RealName', res.data.data.name)
						this.$set(UserInfo, 'UserName', res.data.data.name)
						this.$set(UserInfo, 'OpenId', res.data.data.openId)
						this.$set(UserInfo, 'UserPhone', res.data.data.phone)
						this.$set(UserInfo, 'remark', res.data.data.remark)
						this.$set(UserInfo, 'Sign', res.data.data.sign)
						this.$set(UserInfo, 'state', res.data.data.state)
						this.$set(UserInfo, 'veriType', res.data.data.veriType)
						// 暂时不删除
						// this.userInfo = {
						// 	...res.data.data,
						// 	name: res.data.data.name || this.userInfo.name,
						// 	phone: res.data.data.phone || this.userInfo.phone,
						// 	idCard: res.data.data.idNumber || this.userInfo.idCard,
						// 	avatarUrl: res.data.data.avatarUrl || this.userInfo.avatarUrl,
						// 	smscode: res.data.data.smscode || this.userInfo.smscode,
						// }
						if (UserInfo.RealName) this.getBG(UserInfo.RealName)
						else uni.removeStorageSync('nameBG')
					} else {
						// 说明未认证
						this.auth = 1
					}
					this.userInfo = UserInfo
					// 重新缓存用户信息
					uni.removeStorageSync('userInfo')
					// 重新缓存用户信息
					uni.setStorageSync('userInfo', UserInfo)
					// 存储缓存是否认证
					uni.removeStorageSync('flag', this.flag)
					uni.setStorageSync('flag', this.flag)

				})
				// 	return this.flag
			},

			getBG(name) {
				this.$http('post', '/Base_Manage/Upload/GetNameSign?Name=' + name).then(res => {
					if (res.Success) uni.setStorageSync('nameBG', res.Data)
				})
			},
			// 字符串空格处理
			getReplaceId(data) {
				if (data) {
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 触底
			lower(e) {
				console.log('触底了')
				if (this.homeListData.length >= this.Total) {
					this.status = "noMore"
					return
				}
				this.getDataList()
			},
			// 获取顶部额度数据
			GetLimit() {
				this.$http('post', '/Base/Base_Quota/GetLimit?CreatorId=' + this.userInfo.Id).then(res => {
					if (res.Success) {
						this.Totalamount = res.Data.Totalamount
						this.Usedamount = res.Data.Totalamount - res.Data.Usedamount
						// console.log('顶部额度数据', this.Totalamount , this.Usedamount)
					}
				})
			},
			AgreementPage(item) {
				uni.setStorageSync('shopInfo', item)
				uni.navigateTo({
					url: '/pages/AgreementPage/AgreementPage'
				})
			},
			toInfoPage(item) {
				uni.navigateTo({
					url: '/pages/Order/OrderInfoDetail?Id=' + item.Id
				})
			},
			// 获取公司信息
			GetDataCompanyData(url) {
				// 获取公司信息
				this.$http("post", "/Base_Manage/Base_Company/GetDataCompanyData", {
						Search: {
							condition: "CreatorId",
							keyword: this.userInfo.Id,
						},
					})
					.then((res) => {
						if (res.Success) {
							console.log('获取是否商铺认证', res.Data, res.Data[0].CardPhoto)
							if (res.Data.length > 0) {
								if (res.Data[0].CardPhoto == null) { // 说明没有营业执照 没有认证商铺。 强制 进行商铺认证
									uni.showModal({
										title: '温馨提示',
										content: '您的商铺未认证，请先进行商铺认证',
										success: function(res) {
											if (res.confirm) {
												this.isShop = true
												uni.showLoading({
													title: '跳转中'
												})
												// 跳转商铺维护
												setTimeout(function() {
													uni.navigateTo({
														url: '/pages/User/RealPage'
													})
													uni.hideLoading()
												}, 1000)
											} else if (res.cancel) {
												this.isShop = true
												console.log('用户点击取消');
											}
										}
									});
									return
								} else {
									this.CompanyInfo = res.Data[0];
									uni.setStorageSync('CompanyInfo', this.CompanyInfo)
									if (url) {
										uni.navigateTo({
											url
										})
									}
								}
							}

						}
					});
			},
			toPage(url) {
				// 判断是否存在店铺  来决定是否跳转立即赊货
				this.GetDataCompanyData(url)
			},
			// 获取顶部统计数据
			GetBuyerStatistics() {
				this.$http('post', '/BO/ApplicationForm/GetBuyerStatistics?CreatorId=' + this.userInfo.Id).then(res => {
					if (res.Success) {
						this.entity = res.Data
						if (res.Data == null) {
							this.statusList.forEach(item => {
								item.number = 0
							})
						} else {
							this.statusList[0].number = res.Data.WholeCount
							this.statusList[1].number = res.Data.ShippedCount
							this.statusList[2].number = res.Data.ReceivedCount
							this.statusList[3].number = res.Data.RepaidCount
						}

					}
				})
			},
			// 修改个人信息
			toEditUserInfo(type) {
				let url = ''
				if (type == '用户名') url = `type=text&value=${this.userInfo.UserName||''}&key=UserName&title=用户名`
				else if (type == '手机号') url = `type=number&value=${this.userInfo.UserPhone||''}&key=UserPhone&title=手机号`
				else if (type == '公司') {
					if (this.userInfo.IsSubAccount) return this.$api.msg('暂无权限')
					let cId = this.CompanyInfo.Id ? this.CompanyInfo.Id : ''
					uni.navigateTo({
						url: '/pages/user/company?Id=' + cId
					})
					return
				}
				uni.switchTab({
					url: '/pages/User/User'
				})
			},
			getDataList() {
				this.status = "loading"
				// this.$http('post', '/BO/ApplicationForm/GetBuyerOrderList', {
				this.$http('post', '/BO/ApplicationForm/GetBuyerOrderList', {
					...this.pagination,
					"SortField": "CreateTime",
					"SortType": "desc",
					"Search": {
						"Keys": this.userInfo.Id
					}
				}).then(res => {
					if (res.Success) {
						// 赋值总条数
						this.Total = res.Total
						if (res.Data.length == 0) {
							this.status = "noMore"
							return
						}
						if (this.pagination.PageIndex == 1) {
							this.homeListData = res.Data
							this.pagination.PageIndex += 1
						} else {
							this.homeListData = this.homeListData.concat(res.Data)
							this.pagination.PageIndex += 1

						}
						uni.stopPullDownRefresh(); //停止刷新
						if (this.pagination.PageRows * this.pagination.PageIndex > this.Total) {
							// 暂停加载  没有更多了
							this.status = "noMore"
							return
						}

					} else {
						// 停止加载状态
						this.status = "noMore"
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		height: 100%;
		background-image: url('/static/home/background.png');
		background-size: contain;
		background-repeat: no-repeat;
		padding: 0 20px;
		/* #ifdef APP-PLUS */
		padding-top: 40px;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-top: 5px;
		/* #endif */
		box-sizing: border-box;

		.flexBox {
			view {
				flex: 1;
			}
		}

		.title {
			font-size: 26px;
			font-family: '仿宋';
			line-height: 1.2;
			color: #fff;
		}

		.top {
			margin-top: 10px;
			background-image: url('/static/home/top.png');
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 10px 4px;
			border-radius: 8px;
			height: 168px;
			/* #ifdef APP-PLUS */
			height: 160px;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			height: 160px;
			/* #endif */
			overflow: hidden;
			font-size: 14px;

			.avatarBox {
				padding: 0 20px;
				box-sizing: border-box;
				color: #3164faba;
				font-weight: bold;
				font-size: 20px;
				position: relative;

				.avatar-wrapper {
					background-color: transparent;
					width: 30px;
					height: 30px;
					padding: 0;
					border-radius: 5px;
					margin-right: 8px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.fontG {
					margin-top: 7px;
					font-weight: normal;
					color: #aaa;
					font-size: 14px;
				}

			}

			.moneyYuan {
				height: 47px;
				line-height: 47px;
				color: #3164fa;
				box-sizing: border-box;
				padding-left: 20px;

				.money {
					font-size: 30px;
					margin-right: 10px;
				}
			}

			.noAuth {
				text-align: center;
				font-size: 32px;
				font-family: '仿宋';
				height: 60px;
				line-height: 60px;
				padding-bottom: 0;
			}

			.statusNum {
				display: flex;
				text-align: center;

				.statusItem {
					flex: 1;
					display: flex;
					flex-direction: column;

					.num {
						font-weight: 600;
					}
				}

				.remarkItem {
					flex-direction: row;
					align-items: center;
					color: #aaa;
					justify-content: center;

					image {
						width: 15px;
						height: 15px;
						margin-right: 2px;
					}
				}
			}
		}

		.iconImageBox {
			margin-top: 20px;
			display: flex;
			justify-content: center;

			.IIB {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0 16px;

				image {
					width: 50px;
					height: 50px;
				}

				.IIBtitle {
					font-weight: bold;
					font-size: 14px;
				}

				.IIBremark {
					font-size: 12px;
					margin-top: -5px;
					color: #aaa;
				}
			}
		}

		// .btnBox {
		// 	padding: 10px;
		// 	display: flex;
		// 	justify-content: space-between;

		// 	button {
		// 		width: 48%;
		// 		margin: 0;
		// 	}
		// }

		.content {
			padding: 0 3px;
			box-sizing: border-box;
			font-size: 13px;

			.scroll {
				// height: 250px;
				// border:1px solid blue;
				// 兼容H5和APP
				/* #ifdef H5 */
				height: calc(100vh - 365px);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 337px);
				/* #endif */
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 307px);
				/* #endif */
			}

			.merchant {
				background-color: rgba(255, 255, 255, .9);
				border-radius: 10px;
				box-shadow: 1px 1px 5px #ccc;
				box-sizing: border-box;
				padding: 20rpx;
				padding-top: 10px;
				margin: 10px 0;
				overflow: hidden;
				position: relative;


				.imageBox {
					.imageLeft {
						width: 25px;
						height: 25px;
						vertical-align: sub;
						margin-right: 6px;
						border-radius: 5px;
					}

					.imageRight {
						position: absolute;
						right: 0;
						top: 0;
						width: 40px;
						height: 40px;
					}
				}
			}
		}

	}
</style>